<template>
 <common-card title="今日交易用户数" :value="numberFormat(orderUser)">
  <div ref="barChartRef" style="width:100%;height:100%"></div>
  <template #footer>
  <span>退货率</span> 
  <span class="emphasis">&nbsp{{numberFormat(returnRate)}}%</span>
  </template>
 </common-card>
</template>

<script lang="ts">

export default {
  name: "TodayUsers",  
}
</script>

<script lang="ts" setup>
import CommonCard from './CommonCard.vue'
import { onMounted, ref ,computed,watch} from 'vue';
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';

const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat} = useFormat()

//交易用户数
const orderUser = computed(()=>reportDataStore.reportData.orderUser)
//退货率
const returnRate = computed(()=>reportDataStore.reportData.returnRate)
//Y轴数据
const orderUserTrend = computed(()=>reportDataStore.reportData.orderUserTrend || [])
//X轴数据
const orderUserTrendAxis = computed(()=>reportDataStore.reportData.orderUserTrendAxis || [])


//获取页面中的对象
const barChartRef = ref()
let barChart: EChartsType


const getOption=()=>{
  return{
    xAxis:{
      data:orderUserTrendAxis.value
    },
    yAxis:{
      show: false
    },
    series:{
      type:'bar',
      data:orderUserTrend.value
    },
    grid:{
      left:0,
      right:0
    },
    tooltip:{
      trigger:'axis',
      confine: true
    }

  }
}

onMounted(()=>{
  //初始化
  barChart = echarts.init(barChartRef.value)
  //生成图表
  barChart.setOption(getOption())
    //实现响应式效果
    window.addEventListener('resize', () => {
    barChart.resize()
})
})

watch(orderUser,()=>{
  barChart.setOption(getOption())
})
</script>

<style scoped></style>